<script>
export default {
	data() {
		return {
			user_id:"",
			// 用户信息
			userInfo: {

			},
			backendInfo: {

			},
		}
	},
	onLoad() {
		this.getUserInfo()
		this.getBackendInfo()
	},
	methods: {
		async getUserInfo() {
			const res = await this.http("get", "/api/user/user_info", {})
			this.userInfo = res.data
			this.user_id = this.userInfo.id
		},
		async getBackendInfo() {
			const res = await this.http("get", "/api/master/index", {})
			this.backendInfo = res.data
		},
		goto(url) {
			if(url=='/pages/my/park/park'){
				if(this.backendInfo.is_station==0){
					uni.showToast({
						title:'请添加电站'
					})
					return false
				}
			}
			if(url=='/pages/my/pile'){
				
				if(this.backendInfo.is_park==0){
					uni.showModal({
						title: '提示',
						content: '没有车位可使用',
						confirmText:'前往添加',
						cancelText:'取消',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/my/addPark'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
			}
			uni.navigateTo({
				url: url
			})
		},
		gotoPage(status, type) {
			uni.navigateTo({
				url: `/pages/my/reservation?status=${status}&type=${type}`
			})
		},
		gotoPage2(){
			uni.navigateTo({
				url: `/pages/my/balance?type=1`
			})
		}
	}
}
</script>
<template>
	<view class="my-content">
		<view class="my-one">
			<image class="one-bg" src="../../static/my/bg1.png" mode="widthFix"></image>
			<view class="one-con">
				<image :src="userInfo.headimg || '/static/pic/logo.png'" class="rounded-full w-160 h-160 mr-49"
					mode="aspectFill"></image>
				<text>{{ userInfo.username }}</text>
				<image class="set-btn" @click="goto('/pages/my/myinfo')" src="../../static/my/icon1.png"
					mode="widthFix"></image>
			</view>
		</view>

		<view class="backend-box">
			<view class="backend-item" @click="gotoPage(1, 1)">
				<text class="big-text">{{ backendInfo.order_charge }}</text>
				<text>预约充电</text>
			</view>
			<view class="backend-item" @click="gotoPage(2, 1)">
				<text class="big-text">{{ backendInfo.order_charge_already }}</text>
				<text>已约入场</text>
			</view>
			<view class="backend-item" @click="gotoPage(3, 1)">
				<text class="big-text">{{ backendInfo.order_charge_ing }}</text>
				<text>充电中</text>
			</view>
			<view class="backend-item" @click="gotoPage(4, 1)">
				<text class="big-text">{{ backendInfo.order_charge_complete }}</text>
				<text>完成充电</text>
			</view>
		</view>
		<view class="backend-box">
			<view class="backend-item" @click="gotoPage(1, 2)">
				<text class="big-text">{{ backendInfo.order_park }}</text>
				<text>预约停车</text>
			</view>
			<view class="backend-item" @click="gotoPage(2, 2)">
				<text class="big-text">{{ backendInfo.order_park_already }}</text>
				<text>已约入场</text>
			</view>
			<view class="backend-item" @click="gotoPage(3, 2)">
				<text class="big-text">{{ backendInfo.order_park_ing }}</text>
				<text>待支付</text>
			</view>
			<view class="backend-item" @click="gotoPage(4, 2)">
				<text class="big-text">{{ backendInfo.order_park_complete }}</text>
				<text>完成停车</text>
			</view>
		</view>
		<view class="backend-box">
			<view class="backend-item">
				<text class="big-text">{{ backendInfo.income_charge }}</text>
				<text>充电收入</text>
			</view>
			<view class="backend-item">
				<text class="big-text">{{ backendInfo.income_park }}</text>
				<text>停车收入</text>
			</view>
			<view class="backend-item">
				<text class="big-text">{{ backendInfo.total_income }}</text>
				<text>总收入</text>
			</view>
			<view class="backend-item" @click="gotoPage2()">
				<text class="big-text">{{ backendInfo.amount }}</text>
				<text style="color: blue;">余额</text>
			</view>
		</view>
		<view class="backend-icon">
			<view class="icon-item" @click="goto('/pages/my/park/park')">
				<image src="../../static/my/my2.png" mode="widthFix"></image>
				<text>我的车位</text>
			</view>
			<view class="icon-item" @click="goto('/pages/my/pile')">
				<image src="../../static/my/my4.png" mode="widthFix"></image>
				<text>我的电桩</text>
			</view>
			<view class="icon-item" @click="goto('/pages/my/selfCharg')" v-if="userInfo.station.type==2">
				<image src="../../static/my/my10.png" mode="widthFix"></image>
				<text>自充电</text>
			</view>
			<view class="icon-item" @click="goto('/pages/my/account')">
				<image src="../../static/my/my9.png" mode="widthFix"></image>
				<text>收款账号</text>
			</view>
		</view>
		
		<view class="backend-icon" @click="goto('/pages/my/order/handle?user_id='+user_id)">
			<image src="https://app.yinuoxinnengyuan.cn/static/share.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		
	</view>
</template>



<style lang="less">
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.my-one {
		width: 100%;
		background-color: #000;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20upx;

		.one-bg {
			width: 100%;
			height: auto;
			display: block;
		}

		.one-con {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			box-sizing: border-box;

			text {
				font-size: 36upx;
				color: #fff;
				font-weight: 600;
			}

			.set-btn {
				width: 48upx;
				height: auto;
				position: absolute;
				right: 20upx;
				top: 20upx;
			}

		}
	}

	.backend-box {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.backend-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			width: 25%;
			text {
				font-size: 28upx;
				color: #3D3D3D;
			}

			.big-text {
				font-size: 38upx;
				color: #FA5151;
				font-weight: 500;
			}
		}
	}

	.backend-icon {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 40upx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.icon-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;

			image {
				width: 80upx;
				height: auto;
				display: block;
				margin-bottom: 10upx;
			}

			text {
				font-size: 32upx;
				color: #3D3D3D;
			}
		}
	}
}
</style>